<template>
  <el-dialog
    :title="title"
    :visible.sync="open"
    :fullscreen="true"
    :modal="false"
    width="100%"
    :append-to-body="false"
    :modal-append-to-body="false"
    custom-class="myDialogClass"
    :show-close="false"
    :center="true"
  >
    <div class="f-c px-20 c-n12 fs-18">
      <slot name="custom" />
      <div class="py-12">{{ templateTip }}</div>
      <div class="pt-8 pb-32">
        <span class="cur-p fs-14" style="color: #1890FF;" @click="download">下载标准模板</span>
      </div>
      <div class="b-upload">
        <FileUpload v-if="open" v-model="fileStr" v-bind="$attrs" label="上传文件" />
      </div>
      <div class="f-r -c mt-8">
        <el-button class="mr-8" @click="cancel">取 消</el-button>
        <el-button type="primary" @click="ok">导 入</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import FileUpload from './FileUpload'
export default {
  components: {
    FileUpload
  },
  props: {
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '导入'
    },
    templateTip: {
      type: String,
      default: '请先下载标准模板，按照模板规范录入数据后上传后，再点击导入'
    },
    templateUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileStr: ''
    }
  },
  methods: {
    cancel() {
      this.$emit('close')
    },
    download() {
      window.open(this.templateUrl, '_blank')
    },
    ok() {
      this.$emit('ok', JSON.parse(this.fileStr))
    }
  }
}
</script>

<style lang="scss" scoped>
.b-upload {
  position: relative;
}
</style>
